import { Drawer, Space } from "antd";
import React, { useMemo } from "react";
import { useDispatch, useSelector } from "umi";
import IconMap from "./IconMap";
const Drawers = ({ title, _id, render, reloadList, deleteHandle }: any) => {
  const dispatch = useDispatch();
  const detailStatus = useSelector((state: any) => state.common.detailStatus);
  const titleName = useMemo(() => {
    return (
      <div className="flex items-center gap-2">
        <span>{IconMap.EditOutlined}</span>
        <span>{title}</span>
      </div>
    );
  }, [title]);

  const closeHandle = () => {
    // console.log("closeHandle");
    dispatch({ type: "common/toggleDetail", payload: false });
  };

  const extra = () => {
    return (
      <div className="flex items-center gap-4 cursor-pointer">
        <span
          onClick={(e) => {
            e.stopPropagation();
            // 直接操作最新的 detailData
            deleteHandle();
          }}
        >
          {IconMap.DeleteOutlined}
        </span>
        <span onClick={closeHandle}>{IconMap.CloseOutlined}</span>
      </div>
    );
  };

  return (
    <div>
      <Drawer
        title={titleName}
        placement="right"
        width={500}
        extra={extra()}
        closable={false}
        open={detailStatus}
        destroyOnHidden={true}
        maskClosable
      >
        {render()}
      </Drawer>
    </div>
  );
};

export default Drawers;
